import 'package:flutter/material.dart';

import './conversation_data.dart' show Conversation,con,ConData,dataMap;

class WechatPage extends StatefulWidget{
  _weChatPage createState ()=> _weChatPage();

}

class _DeviceItem extends StatelessWidget{
  const _DeviceItem(
      this.device
      );
  final String device;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    String deviceType;
    Icon deviceIcon;
    if(device=='Device.WIN'){
      deviceType = 'Windows';
      deviceIcon=new Icon(Icons.laptop_windows,color:Colors.grey);
    }else{
      deviceType = 'Mac';
      deviceIcon=new Icon(Icons.desktop_mac,color:Colors.grey);
    }
    final Widget deviceTypeWidget = new Text(
        deviceType,
        style:TextStyle(
            color:Colors.grey
        )
    );
    return new Container(
      child:new Row(
          children:<Widget>[
            deviceIcon,
            new Container(
              child:deviceTypeWidget,
              margin:const EdgeInsets.only(
                left:30.0,
                right:10.0
              )
            ),
            new Text(
              '微信已登录',
              style:TextStyle(
                color:Colors.grey
              )
            )
          ]
      ),
      padding:const EdgeInsets.symmetric(
        vertical: 10.0,
        horizontal: 30.0
      ),
      decoration:BoxDecoration(
        color:Color(0xffeeeeee),
        border:Border(
          bottom:BorderSide(
            width:1.0,
            color:new Color(0xffcccccc)
          )
        )
      )
    );
  }
}

class _weChatPage extends State<WechatPage>{
  @override
  Widget build(BuildContext context) {
    final ConData abc = ConData.mock();
    final conc = dataMap['con'];
    final device = dataMap['device'];
    return new ListView.builder(
      itemBuilder: (BuildContext ctx, int index){
        if(index==0){
          return _DeviceItem(device.toString());
        }
        return new _weChartItem(conversation:conc[index-1]);
      },
      itemCount:con.length+1
    );
  }
}

class _weChartItem extends StatelessWidget{

  const _weChartItem({Key key,this.conversation}):assert(conversation!=null),super(key:key);

  final Conversation conversation;

  @override
  Widget build(BuildContext context) {
    return new Row(
      children:<Widget>[
        _weChartAvater(
          conversation.avatar,
          conversation.unreadMsgCount
        ),
        _weChartTitle(
          title:conversation.title,
          des:conversation.des
        ),
        _weChartCreateAt(
          createAt:conversation.updateAt,
          isMute:conversation.isMute
        )
      ]
    );
  }
}

class _weChartAvater extends StatelessWidget{
  const _weChartAvater(
    this.avatar,
    this.unreadMsgCount
):super();
  final String avatar;
  final int unreadMsgCount;
  @override
  Widget build(BuildContext context) {
    Widget avatarContainer;
    Widget isMessageCount;
    if(avatar.indexOf('http') == -1){
      avatarContainer = new Image.asset(avatar,width:60,height:60);
    }else{
      avatarContainer = new Image.network(avatar,width:60,height:60);
    }
    if(unreadMsgCount>0){
      isMessageCount = new Positioned(
          right:3.0,
          top:3.0,
          child: new Container(
              child:new Text(unreadMsgCount.toString(),style:TextStyle(color:Colors.white),),
              width:22.0,
              height:22.0,
              alignment: Alignment.center,
              decoration:BoxDecoration(
                  borderRadius: BorderRadius.circular(50),
                  color:Colors.red
              )
          )
      );
    }else{
      isMessageCount = new Text('');
    }
    return new Stack(
      children:<Widget>[
        new Container(
          child:avatarContainer,
          decoration:BoxDecoration(
            borderRadius: BorderRadius.circular(10.0),
          ),
          width:60,
          height:60,
          margin:const EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0)
        ),
        isMessageCount
//        new ClipOval(
//          child:new Container(
//            width:20.0,
//            height:20.0,
//            color:Colors.cyan
//          )
//        )
      ]
    );
  }
}

class _weChartTitle extends StatelessWidget{
  const _weChartTitle({
    Key key,
    this.title,
    this.des
}):assert(title!=null),assert(des!=null),super(key:key);
  final String title;
  final String des;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Expanded(
      child:new Container(
        child:new Column(
          children:<Widget>[
            new Container(
              child:new Text(
                title,
                style:TextStyle(
                  fontSize: 20.0,
                  color:Color(0xff333333)
                )
              ),
              height:30,
              margin:const EdgeInsets.only(
                top:5.0
              )
            ),
            new ClipRect(
              clipBehavior: Clip.hardEdge,
              child:new Text(
                des,
                style:TextStyle(
                  color:Color(0xff999999)
                )
              ),
            )
          ],
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
        ),
        decoration:BoxDecoration(
          border:Border(
            bottom:BorderSide(
              width:1,
              color:Color(0xffdddddd)
            )
          )
        ),
        padding:const EdgeInsets.fromLTRB(0, 10.0, 0, 10.0),
        height:80
      )
    );
  }
}

class _weChartCreateAt extends StatelessWidget{
  const _weChartCreateAt({
    this.createAt,
    this.isMute
}):assert(createAt!=null),assert(isMute!=null);
  final bool isMute;
  final String createAt;
  @override
  Widget build(BuildContext context) {
    Widget muteIcon;
    if(isMute){
      muteIcon = new Container(
        child:new Icon(
            Icons.alarm_off,
            size: 20.0,
            color:Color(0xff999999)
        ),
      );
    }else{
      muteIcon=new Text('');
    }
    // TODO: implement build
    return Container(
      child:new Column(
        children:<Widget>[
          new Container(
            child: new Text(
              createAt,
              style:TextStyle(
                color:Color(0xff999999)
              )
            ),
            height:25,
            margin:const EdgeInsets.only(
              top:8
            )
          ),
          muteIcon
        ]
      ),
      width:70,
      padding:const EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
      decoration:BoxDecoration(
        border:Border(
          bottom:BorderSide(
            width:1,
            color:Color(0xffdddddd)
          )
        ),
      ),
      height:80,
    );
  }
}